<template>
  <div class="biz-container">
    <table-layout :haveSider="false">
      <template #searchBox>
        <search-layout
          :formInfos="q_formInfos"
          :formDatas="q_formDatas"
          message="提示 : 先添加商品后才能添加客户商品对照"
          @onFind="onFind"
        ></search-layout>
      </template>
      <template #batchOperat>
        <batch-operat-btn :addData="true" @onAddData="onAddData">
          <template #cusBtn>
            <!-- <a-button type="primary" icon="vertical-align-bottom" size="small"> 自定义按钮 </a-button> -->
            <!-- <im-export></im-export> -->
          </template>
        </batch-operat-btn>
      </template>
      <template #tableList="slotData">
        <a-list-table
          :columns="columns"
          :tableData="listdata"
          :pagination="pagination"
          :isSelecttion="true"
          :loading="loading"
          :scroll="{y:slotData.tableHeight}"
          @onTableChange="handleTableChange"
          @onSelect="onSelect"
          @onAction="onAction"
        >
        </a-list-table>
      </template>
    </table-layout>
     <saleGoodsModal ref="modal" @ok="handleModalSaveOk" @close="handleModalCancel" />
  </div>
</template>

<script>
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListInfo from '@/views/app/biz/common/aListInfo'
import aListTable from '@/views/app/biz/common/aListTable'
import saleGoodsModal from './saleGoodsModal'
import {
  getByConditions,
  getByConditionsCount
} from './salegoods'


// 字段列表
const columns = [
  { title: '销售代码', dataIndex: 'chanPingdm', key: 'chanPingdm', align: 'center' },
  { title: '品名', dataIndex: 'pinMing', key: 'pinMing', align: 'center' },
  { title: '通用名', dataIndex: 'tongYongm', key: 'tongYongm', align: 'center' },
  { title: '注册证号', dataIndex: 'zhuCezh', key: 'zhuCezh', align: 'center' },
  { title: '规格', dataIndex: 'guiGe', key: 'guiGe', align: 'center' },
  // { title: '型号', dataIndex: 'xingHao', key: 'xingHao', align: 'center' },
  // { title: '一级分类代码', dataIndex: 'yiJifldm',key: 'yiJifldm',   align:'center', },
  // { title: '一级分类名称', dataIndex: 'yiJiflmc', key: 'yiJiflmc', align: 'center' },
  // { title: '二级分类代码', dataIndex: 'erJifldm', key: 'erJifldm', align:'center' },
  // { title: '二级分类名称', dataIndex: 'erJiflmc', key: 'erJiflmc', align: 'center' },
  // { title: '三级分类代码', dataIndex: 'sanJifldm', key: 'sanJifldm',align:'center'  },
  // { title: '医保代码', dataIndex: 'yiBaodm', key: 'yiBaodm', align: 'center' },
  { title: '计量单位', dataIndex: 'jiLiangdw', key: 'jiLiangdw', align: 'center' },
  { title: '单价', dataIndex: 'hanShuidj', key: 'hanShuidj', align: 'center' },
  { title: '生产企业名称', dataIndex: 'shengChanqymc', key: 'shengChanqymc', align: 'center' },
  { title: '高/低值', dataIndex: 'jiaZhisx', key: 'jiaZhisx', align: 'center' },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'operation',
    width: 150,
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
]
// 查询表单
const q_formInfos = [
  { label: '品名', name: 'pinMing', type: 'input', placeholder: '品名' },
  { label: '注册证号',name: 'zhuCezhPid',type: 'zchselect', zhuangTai:'全部',placeholder: '注册证号'},
  { label: ['查询', '重置'], type: 'botton' },
]
// 查询表单绑定数据
const q_formDatas = {
  pinMing: null,
  zhuCezhPid: null,
}
export default {
  components: {
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListInfo,
    aListTable,
    saleGoodsModal
  },
  data() {
    return {
      columns: columns,
      listdata: [],
      loading: false,
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      q_formInfos: q_formInfos,
      q_formDatas: q_formDatas,
      pData: {}, // 条件查询参数
    }
  },
  computed: {},
  watch: {
    //监听路由，只要路由有变化(路径，参数等变化)都有执行下面的函数，你可以
    $route: {
        handler: function (val, oldVal) {
          //created事件触发的函数可以在这里写... 
          this.q_formDatas.zhuCezhPid=this.$route.params.zhuCezhPid
          this.getTotal()
          this.getList(this.q_formDatas)
        },
        deep: true,
        immediate:true
    }
  },
  mounted() {
    
  },
  methods: {
    // 初始化页面时得到总数
    async getTotal() {
      let pages = ''
      pages = await getByConditionsCount(this.q_formDatas)
      console.log(pages)
      if (pages && pages.code && pages.code === 'C1') {
        const pagination = { ...this.pagination }
        pagination.total = pages.data
        this.pagination = pagination
        this.pagination.showTotal =  (showTotal) => {return `共 ${showTotal} 条`}
      }
    },
    // 初始化查询时的数据列表
    async getList(params) {
      console.log('请求列表时传入的数据', params)
      this.loading = true
      this.listdata = []
      let res = ''
      res = await getByConditions(params, this.pagination)
      this.loading = false
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
         for (let item of resdata) {
            this.listdata.push({
               key: item.pid,
               action: ['编辑'],
               ...item
               }
            )
         }
      } else {
        this.listdata = []
      }
      this.loading = false
    },
    // 新增按钮 点击了新增
    onAddData() {
      console.log('点击了新增')
      this.$refs.modal.addModal()
    },
    // 关闭模态详细框
    handleModalCancel() {
    },
    // 模态详细框提交按钮
    handleModalSaveOk() {
      this.getList(this.q_formDatas)
    },
    // 操作按钮
    onAction(text, record, index) {
      
      console.log('点击list中的操作按钮', text, record, index)
      if (text == '编辑') {
        //编辑
        this.$refs.modal.editModal(record.pid)
      }
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getList(this.q_formDatas)
    },
    // 查询按钮
    onFind (){
      this.pagination.current = 1
      this.getTotal()
      this.getList(this.q_formDatas)
    },
    // 多选批量操作
    onSelect(record, selected, selectedRows) {
      console.log('onSelect', record, selected, selectedRows)
    },
  },
}
</script>

<style>
</style>